<template>
  <view style="padding-bottom: 200rpx;">
    <ComponentCategory :list="treeList" :set-id="SetId" @reload="handleReload()"></ComponentCategory>

    <view class="btn-group-fixed u-p-20"><u-button type="warning" @tap="onAddClick">添加一级分类</u-button></view>
    <!-- <u-swipe-action :show="item.show" :index="index" 
			v-for="(item, index) in list" :key="item.id" 
			@click="click" @open="open"
			:options="options"
		>
			<view class="item u-border-bottom">
				<view class="title-wrap">
					<u-icon name="arrow-right" color="#ff8441" v-if="!item.isOpen"></u-icon>
					<u-icon name="arrow-down" color="#ff8441" v-else></u-icon>
					<text class="title">{{ item.title }}</text>
				</view>
			</view>
		</u-swipe-action> -->

    <u-modal
      title="添加分类"
      v-model="showModal"
      :show-cancel-button="true"
      confirm-text="保存"
      confirm-color="#ff8441"
      width="700rpx"
      :async-close="true"
      @confirm="handleConfirm"
    >
      <view class="slot-content u-p-l-40 u-p-r-40">
        <u-form class="form" :model="{}" :label-width="150">
          <u-form-item label="分类名称">
            <u-input v-model="category.Name" placeholder="分类名称" :border="true"></u-input>
          </u-form-item>
          <u-form-item label="排序">
            <u-input v-model="category.Sort" type="number" placeholder="请输入序号" :border="true"></u-input>
          </u-form-item>
          <u-form-item label="备注信息">
            <u-input v-model="category.Remark" type="textarea" placeholder="请填写备注" :border="true"></u-input>
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
  </view>
</template>

<script>
import ComponentCategory from './component-category.vue';
export default {
  components: { ComponentCategory },
  data() {
    return {
      list: [],

      treeList: [],

      SetId: '',

      showModal: false,

      category: {
        SetId: '',
        Parentid: 0,
        Name: '',
        Sort: '',
        Remark: ''
      }
    };
  },

  onLoad(options) {
    if (options.Id) {
      this.SetId = options.Id;
      this.category.SetId = options.Id;
    }
    console.log(options);

    this.getCategoryData();
  },

  methods: {
    mapListToTree(list, parentId) {
      let children = [];
      if (!parentId) {
        children = list.filter(item => item.Level == 1);
      } else {
        children = list.filter(item => item.ParentId == parentId);
      }

      children.forEach(item => {
        this.$set(item, 'isOpen', false);
        this.$set(item, 'children', this.mapListToTree(list, item.Id));
      });

      return children;
    },

    onAddClick(item) {
      this.modalTitle = '添加分类';
      this.category.Parentid = item.Id;
      this.showModal = true;
    },

    handleConfirm() {
      this.$u.api.addCostsCategory(this.category).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode == 1) {
          this.$u.toast(ResultMessage);
          this.showModal = false;
          this.getCategoryData();
        }
      });
    },

    handleReload() {
      this.getCategoryData();
    },

    getCategoryData() {
      this.$u.api
        .getCostsCategoryList({
          SetId: this.SetId,
          ParentId: -1
        })
        .then(res => {
          console.log(res);
          const { TypeExtendList, ResultCode } = res;
          if (ResultCode == 1) {
            this.list = TypeExtendList;

            this.treeList = this.mapListToTree(this.list, null);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped></style>
